<template>
  <div class="border-common">
    <div class="border-item border-top">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="border-item border-middle"></div>
    <div class="border-item border-bottom"></div>
    <div class="border-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "borderWrap"
}
</script>

<style lang="scss" scoped>
.border-common{
  width: 100%;
  height: 100%;
  position: relative;
  .border-content{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .border-item{
    position: absolute;
    z-index: 1;
    &.border-top{
      top: 0;
      left: 0;
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      span{
        display: block;
        height: 100%;
        position: relative;
        &:nth-child(1){
          width: 500px;
          background: url(../../assets/images/border-of-section-title.png) no-repeat center center / auto 100%;
          &::after{
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 100%;
            background: url(../../assets/images/title-bg.png) no-repeat left center / auto 100%;
          }
        }
        &:nth-child(2){
          flex-grow: 1;
          flex-shrink: 1;
          background: url(../../assets/images/border-of-section-hline.png) repeat-x center center / auto 100%;
        }
        &:nth-child(3){
          width: 16px;
          background: url(../../assets/images/border-of-section-radius.png) no-repeat center center / auto 100%;
        }
      }
    }
    &.border-middle{
      left: 0;
      top: 30px;
      width: 100%;
      height: calc(100% - 52px);
      background: url(../../assets/images/border-of-section-vline.png) repeat-y center center / 100% auto;
    }
    &.border-bottom{
      left: 0;
      bottom: 0;
      width: 100%;
      height: 22px;
      background: url(../../assets/images/border-of-section-bottom.png) no-repeat center center / 100% 100%;
    }
  }
}
</style>